<script setup>
import { defineProps,defineEmits } from 'vue'

const props = defineProps({
    getTitle:String,
})

const emit = defineEmits(['clearMesg'])


function clearMesg(){
        if(confirm('确定要清空吗？')){
            emit('clearMesg')
        }
    }
</script>

<template>
  <div class="title">
        <h2>{{ getTitle }}</h2>
        <span @click="clearMesg">清空所有{{ getTitle }}消息<el-icon><Delete /></el-icon></span>
    </div>
</template>

<style lang="less" scoped>
    .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            height: 80px;
            border-bottom: 1px solid #D0D0D0;
            span {
                cursor: pointer;
                color: #2C3E50;
                transition: all 0.3s;
                .el-icon{
                    margin-left: 5px;
                    vertical-align: middle;
                }
            }
            span:hover{
                color: #FC9D99;
            }
            
        }
</style>
